<template>       
<el-container class="home-container">
    <!-- 头部区域 -->
     <el-header>
          <span> 熬夜写博客ing</span>
          <div>
              <el-button type="text" @click="goIndex">首页</el-button>
              <el-button type="text" @click="goResume">个人简历</el-button>
              <el-button type="text" @click="logout">我的博客</el-button>
              <el-button type="text" @click="logout">写博客</el-button>
              <el-button type="text" @click="logout">留言板</el-button>
              <el-button type="text" @click="logout">退出</el-button>
              <el-button v-if="isLogin==false" type="text" @click="login">登录</el-button>
              <span v-else>{{showName}}</span>
       </div>
      </el-header>
  <!-- 页面主体区域 -->
  <el-container>
  <el-main>
      <div class="motto">奔跑在路上</div> 
  </el-main>
  </el-container>
  <!-- 页面尾部 -->
  <el-footer>
      <div class="copyright">Copyright © 熬夜写博客 Blog 2020</div>
  </el-footer>
</el-container>

</template>

<script>
export default {
    methods:{
        logout(){
            window.sessionStorage.clear();
            this.$router.push("/login");
        },
        login(){
            this.$router.push("/login")
        },
        goIndex(){
            this.$router.push("/home")
        },
        goResume(){
            this.$router.push("/resume")
        },
        isLogin(){
            var cookieStr=document.cookie;
            if(cookieStr.length>0){
                
                return true
            }
            else return false
        }

    },
    computed:{
        showName: function(){
              var cookieStr = document.cookie;
              if(cookieStr.length > 0) {
              var cookieArr = cookieStr.split(";"); //将cookie信息转换成数组
              for (var i=0; i<cookieArr.length; i++) {
              var cookieVal = cookieArr[i].split("="); //将每一组cookie(cookie名和值)也转换成数组
              if(cookieVal[0] == "name") {
                  console.log(cookieVal[1]);
                return unescape(cookieVal[1]); //返回需要提取的cookie值
            }
        }
    }

        }
    }
}
</script>
<style scoped>
.el-header{
position: fixed;
display: flex;
width: 100%;
background-color:grey ;
justify-content: space-between;
align-items: center;
color: red;
font-size: 20px;
font-style: italic;
}
.el-header div{
 float: right;
}
.el-header span{
    margin-left: 15px;
}
.el-main{
    margin-top: 60px;
    background-color: #eaedf1;
    background-image:url('../assets/index.jpg');
    background-repeat:no-repeat;
    background-size:100%
}
.motto{
    margin-top: 50px;
    padding-left: 50%;
    padding-right: 50%;
    font-size: 34px;
    font-style: italic;
}
.el-footer{
    background-color: #373d41;
}
.copyright{
    font-size: 14px;
    text-align: center;
    margin-bottom: 0;
    color: #777;
    line-height: 60px;
}
.home-container{
    height: 120%;
}
.el-aside{
     background-color:#545c64;
}
</style>